<template>
    <div class="mine_body">
        <div class="tab" v-if="isShow">
            <span @click="router.push('/page/mine')" class="pointer">个人中心</span>
            <span>
                <el-icon>
                    <ArrowRight />
                </el-icon>
            </span>
            <span>{{ actionTxt }}</span>
        </div>
        <router-view></router-view>
    </div>
</template>



<script setup>
import { onBeforeRouteUpdate } from "vue-router"
import { ArrowRight } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
const router = useRouter()

const isShow = ref(true)
const actionTxt = ref("")


onBeforeRouteUpdate(async (to, from, next) => {
    console.log(to.fullPath);


    switch (to.fullPath) {
        case "/page/mine/orider":
            isShow.value = true;
            actionTxt.value = "我的订单";
            next()
            break;
        case "/page/mine/integral":
            isShow.value = true;
            actionTxt.value = "积分";
            next()
            break;
     
        case "/page/mine/collection":
            isShow.value = true;
            actionTxt.value = "我的收藏";
            next()
            break;
        case "/page/mine/address":
            isShow.value = true;
            actionTxt.value = "收货地址";
            next()
            break;
        case "/page/mine/history":
            isShow.value = true;
            actionTxt.value = "我的足迹";
            next()
            break;
        case "/page/mine/us":
            isShow.value = true;
            actionTxt.value = "联系我们";
            next()
            break;

        default:
            isShow.value = false;
            next()
            break;
    }
})

onMounted(() => {
    console.log(location.pathname,'--------------------------------');
    // isShow.value = false
    // router.push('/page/mine')

    switch (location.pathname) {
        case "/page/mine/orider":
            isShow.value = true;
            actionTxt.value = "我的订单";
            
            break;
        case "/page/mine/integral":
            isShow.value = true;
            actionTxt.value = "积分";
            
            break;
     
        case "/page/mine/collection":
            isShow.value = true;
            actionTxt.value = "我的收藏";
            
            break;
        case "/page/mine/address":
            isShow.value = true;
            actionTxt.value = "收货地址";
            
            break;
        case "/page/mine/history":
            isShow.value = true;
            actionTxt.value = "我的足迹";
            
            break;
        case "/page/mine/us":
            isShow.value = true;
            actionTxt.value = "联系我们";
            
            break;

        default:
            isShow.value = false;
            
            break;
    }

})
</script>

<style scoped lang="scss">
.mine_body {
    width: 1300px;
    margin: 0 auto;

    & .tab {
        font-size: 12px;
        line-height: 20px;
        margin: 10px 0px;

        &>span {
            margin-right: 10px;
            color: #666;
        }

        & .pointer {
            cursor: pointer;

        }

        & .pointer:hover {
            color: #54BAC9;
        }
    }
}
</style>
